<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS实现图片切换（简易轮播图）</title>
  <style>
    #prev {
      position: absolute;
      left: 8px;
      top: 130px;
    }
    #next {
      position: absolute;
      left: 472px;
      top: 130px;
    }
  </style>
</head>
<body>
  <div id="box">
    <img src="img/1.jpg">
    <p></p>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
  </div>

  <a href="" target="_blank"></a>
  <script>
    // 分别获取img，button的dom对象
    undefined
    var img = document.getElementsByTagName('img')[0];
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    //初始化索引位置
    var currentIndex = 1, minIndex = 1, maxIndex = 5;
    //给按钮添加点击事件
    next.onclick = function(){
      if( currentIndex === maxIndex ) {
        currentIndex = minIndex;
      } else {
        currentIndex++;
      }
      img.setAttribute('src', 'img/'+ currentIndex +'.jpg');
    }
    prev.onclick = function(){
      if( currentIndex === minIndex ) {
        currentIndex = maxIndex;
      } else {
        currentIndex--;
      }
      img.setAttribute('src', 'img/'+ currentIndex +'.jpg');
    }
  </script>
</body>
</html>